<template>
    <view class="header-container">
        <div class="left" @click="onBack" v-if="!hiddenBack">
            <wd-icon name="thin-arrow-left" size="32rpx"></wd-icon>
        </div>
        <view class="content">
            {{ title }}
        </view>
        <view class="right">
            <!-- <view class="item">
                <wd-icon name="notification-filled" size="40rpx"></wd-icon>
            </view> -->
            <view class="item" v-if="hiddenBack || showLogout">
                <picker @change="handleConfirm" :value="columnsIndex" :range="columns" range-key="label">
                    <wd-icon name="internet" size="40rpx"></wd-icon>
                </picker>
            </view>
            <view class="item" @click="onLogout" v-if="hiddenBack || showLogout">
                <wd-icon name="logout" size="40rpx"></wd-icon>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { NavigateTo, navigateBack, setStorage, removeStorage } from '@/utils/common';
import { useI18n } from 'vue-i18n';
import { useMemberStore } from '@/stores/modules/member';
const { locale } = useI18n();
import { memberLogout } from '@/api/login';

interface iColumns {
    label: string;
    value: string;
}

const emits = defineEmits(['toBack', 'onLogout']);
const memberStore = useMemberStore();
const columnsIndex = ref<number>(1);
const columns = ref<iColumns[]>([
    {
        label: '日本語',
        value: 'ja' // 日语标准代码
    },
    {
        label: 'English',
        value: 'en' // 英语标准代码（原配置正确）
    },
    {
        label: '繁體',
        value: 'zh-TW' // 繁体中文（中国台湾地区）标准代码，若需通用繁体可设为'zh-Hant'
    },
    // {
    //     label: '한국어',
    //     value: 'ko' // 韩语标准代码
    // },
    // {
    //     label: 'Pусский язык',
    //     value: 'ru' // 俄语标准代码
    // },
    {
        label: '中文',
        value: 'zh-CN' // 简体中文（中国大陆地区）标准代码，若需通用中文可设为'zh'
    },
    {
        label: 'Español',
        value: 'es' // 西班牙语标准代码
    }
    // {
    //     label: 'Português',
    //     value: 'pt' // 葡萄牙语标准代码（若需区分巴西葡语可设为'pt-BR'，欧洲葡语为'pt-PT'）
    // },
    // {
    //     label: 'ภาษาไทย',
    //     value: 'th' // 泰语标准代码
    // },
    // {
    //     label: 'Français',
    //     value: 'fr' // 法语标准代码
    // }
]);

const props = defineProps({
    hiddenBack: {
        type: Boolean,
        default: false
    },
    showLogout: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    type: {
        type: String,
        default: ''
    }
});

const type = ref<string>(props.type);
const title = ref<string>(props.title);
const hiddenBack = ref<boolean>(props.hiddenBack);

onLoad(() => {});

//返回
const onBack = () => {
    if (type.value === 'pay' || type.value === 'router') {
        emits('toBack');
        return;
    }
    navigateBack(1);
};

//退出
const onLogout = () => {
    uni.showModal({
        title: 'Logout',
        content: 'Are you sure you want to logout?',
        confirmText: 'Confirm',
        cancelText: 'Cancel',
        success: async (res) => {
            if (res.confirm) {
                emits('onLogout');
                await memberLogout();
                removeStorage('token');
                removeStorage('user');
                NavigateTo('/pages/login/index');
            }
        }
    });
};

//多语言确认
const handleConfirm = async (e: any) => {
    const index = e.detail.value;
    columnsIndex.value = index;
    const lang = columns.value[index].value;
    locale.value = lang;
    setStorage('lang', lang);
    memberStore.setDataInfo({
        lang
    });
    window.location.reload();
};
</script>

<style lang="scss" scoped>
.header-container {
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    height: 98rpx;
    width: 100vw;
    display: flex;
    align-items: center;
    padding: 0 28rpx;
    box-sizing: border-box;
    background: #fff;

    .content {
        flex: 1;
        text-align: center;
        color: #000;
        font-size: 32rpx;
        font-weight: 600;

        image {
            height: 58rpx;
        }
    }
    .left {
        position: fixed;
        height: 98rpx;
        width: 98rpx;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .right {
        position: fixed;
        height: 98rpx;
        right: 40rpx;
        top: 0;
        display: flex;
        align-items: center;
        .item {
            margin-left: 20rpx;
        }
    }
}
</style>
